<template>
    <div class="main">
        <div class="head-wrap flex-jsb">
            <div class="flex">
                <el-form :model="form" :inline="true" ref="form" label-width="100px" class="form">
                    <el-form-item label="设备名称：" prop="resourceName">
                        <el-input size="mini" clearable v-model="form.resourceName" placeholder="请输入设备名称"></el-input>
                    </el-form-item>

                    <el-form-item label="告警级别：" prop="level">
                        <el-select size="mini" v-model="form.level" placeholder="请选择告警级别">
                            <el-option :label="item.label" :value="item.value" v-for="item in selecData" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="告警动作：" prop="desc">
                        <el-input size="mini" clearable v-model="form.desc" placeholder="请输入告警动作"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div>
                <el-button size="mini" @click="handleRset">重置</el-button>
                <el-button size="mini" type="primary" @click="handleSelect">查询</el-button>
                <!-- <el-button size="mini" type="primary" @click="handleSelect">收起</el-button> -->
            </div>

        </div>
        <div class="bottom-wrap mt15">
            <div class="table-wrap mt25">
                <el-table :data="alarmList" height="570" style="width: 100%" :cell-style="{ color: '#333' }" class="table">
                    <el-table-column prop="alarmLevel" label="告警级别" width="80" />
                    <el-table-column prop="occurTime" label="发生时间" width="150" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <div>{{ formatDate(scope.row.occurTime) }}</div>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="occurTime" label="预警时间" width="160" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <div>{{ formatDate(scope.row.occurTime) }}</div>
                        </template>
                    </el-table-column> -->
                    <el-table-column prop="resourcePathName" label="设备位置" show-overflow-tooltip />
                    <el-table-column prop="stdVCode" label="告警点" width="125" show-overflow-tooltip />
                    <el-table-column prop="alarmDesc" label="告警动作" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <div @click="getId(scope.row)">{{ scope.row.alarmDesc }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="endCause" label="终结原因" show-overflow-tooltip />
                    <el-table-column prop="endTime" label="终结时间" width="150" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <div>{{ formatDate(scope.row.endTime) }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="confirmTime" label="确认时间" width="150" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <div>{{ formatDate(scope.row.confirmTime) }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="conformStatus" label="状态" width="80">
                        <template slot-scope="scope">
                            <div class="flex-ac" v-show="scope.row.conformStatus">
                                <div :class="['state', scope.row.conformStatus == 1 ? 'state2' : 'state1']"></div>
                                <div>{{ scope.row.conformStatus == 1 ? '已确认' : '待确认' }}</div>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column fixed="right" label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button @click="alterConfirm(scope.row.id)" type="text" v-show="scope.row.conformStatus != 1"
                                size="small">确认</el-button>
                            <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">上报</el-button> -->
                            <el-button @click="navigator(scope.row)" type="text" size="small">定位资产</el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <div class="flex-jsb flex-ac">
                    <div></div>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="form.pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="total"
                        class="ml25 mt15 systemPagination el-pagination">
                    </el-pagination>
                </div>
            </div>
        </div>

        <el-dialog title="发现陌生人" center @close="dialogClose" :visible="dialogVisible" width="500px">
            <img width="300" style="margin: 0 auto;display: block;" height="400"
                :src="'data:image/png;base64,' + currentImg" alt="图片地址不正确">
            <div class="dialog">
                <div class="mt15">
                    采集时间:<span class="ml25">{{ formatDate(currentRow.occurTime) }}</span>
                </div>
                <div style="margin-top: 5px;">
                    采集位置:<span class="ml25">{{ currentRow.resourcePathName }}</span>
                </div>
            </div>

        </el-dialog>
    </div>
</template>
<script>
import { getAlarmList, alterConfirm, getDetail } from "@/api/alarm-logsApi.js";
import utils from "@/utils/date.js"

export default {
    data() {
        return {
            selecData: [
                { value: 1, label: "可忽略" },
                { value: 2, label: "注意" },
                { value: 3, label: "告警" },
                { value: 4, label: "严重告警" },
                { value: 5, label: "故障" },
                { value: 6, label: "灾难" }
            ],
            form: {
                resourceName: "",//
                level: "",//
                desc: "",//
                start: 0,
                limit: 10
            },
            alarmList: [],
            showData: [],
            total: 0,
            pageSize: 10,
            currentPage: 1,
            dialogVisible: false,
            currentRow: {

            },
            currentImg: "",
        }
    },
    mounted() {
        this.getAlarmList();
    },
    methods: {
        // 获取告警列表
        getAlarmList() {
            getAlarmList(this.form).then(res => {
                if (res.code = "200") {
                    this.alarmList = res.info;
                    this.total = res.totalCount;
                }
            })
        },
        //告警确认
        alterConfirm(id) {
            alterConfirm({ id }).then(res => {
                if (res.code = "200") {
                    this.message("确认成功", 1)
                }
            })
        },
        navigator(row) {
            this.$router.push({ path: '/computerRoom/asset', query: { devId: row.devId, active: "4" } })
        },
        handleClick(row) {
            // this.alterConfirm(row.id);
        },

        handleSizeChange(val) {
            this.pageSize = val;
            this.currentPage = 1;
            this.form.start = 0;
            this.form.limit = this.form.start + this.pageSize

            this.getAlarmList()
        },

        handleCurrentChange(val) {
            this.form.start = (val - 1) * this.pageSize
            this.form.limit = this.form.start + this.pageSize
            this.getAlarmList();
        },

        formatDate(date) {
            return utils.formatter(date, "yyyy-MM-dd hh:mm:ss")
        },
        handleRset() {
            this.$refs.form.resetFields();
            this.getAlarmList()
        },
        handleSelect() {
            this.getAlarmList();
        },

        getId(row) {
            if (!row.faceId) return;
            this.currentRow = row;
            this.dialogVisible = true;
            this.getDetail(row.faceId)
        },
        dialogClose() {
            this.dialogVisible = false
        },

        getDetail(id) {
            // 获取人像
            getDetail({ id }).then(res => {
                if (res.code = "200") {
                    this.currentImg = res.info
                }
            })
        }

    },
}
</script>
<style lang="scss" scoped>
.main {
    width: 100%;
    height: 100%;
    overflow: auto;
    margin: 0 auto;

    .head-wrap {
        padding: 20px 17px;
        border-radius: 6px;

        /deep/ .el-form-item {
            margin-bottom: 0;

            .el-form-item__label {
                color: #000;
            }
        }
    }

    .head-wrap,
    .bottom-wrap {
        background: #FFFFFF;
        box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
    }

    .bottom-wrap {
        padding: 0 15px;
        border-radius: 10px;
        height: 89%;
        overflow: hidden;

        .table-wrap {
            height: 100%;
            overflow: auto;
            color: #333;

            .table {
                border: 1px solid #F0F0F0;
                border-radius: 0px 0px 6px 6px;
                overflow: hidden;
            }


            /deep/ .el-table__header tr,
            /deep/ .el-table__header th {
                background-color: var(--system-table-header-bgc) !important;
                color: #333;
                font-weight: 400;
            }

            .state {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                margin-right: 5px;
            }

            .state1 {
                background: #FF9000;
            }

            .state2 {
                background: #21B795;
            }
        }
    }

    .dialog {
        color: #333;
        font-size: 15px;
    }
}

.flex-ac {
    display: flex;
    align-items: center;
}



.mt15 {
    margin-top: 15px;
}

.flex {
    display: flex;
}

.flex-jsb {
    display: flex;
    justify-content: space-between;
}

.mt25 {
    margin-top: 25px;
}

.ml25 {
    margin-left: 25px;
}
</style>
  
  
